<template>

    <div class="login-banner">
        <el-form ref="loginForm"
                 :model="user"
                 class="login-main"
                 :rules="rules">
            <div class="login-box">
                <h3 class="loginTitle">忘记密码</h3>

                <div class="login-form" style="background: none; margin-top: 15px;">
                    <el-form-item prop="email">
                        <el-input prefix-icon="el-icon-message" type="text" auto-complete="false" v-model="user.email"
                                  placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item prop="code" :inline="true">
                        <el-input prefix-icon="el-icon-chat-dot-square" type="text"
                                  style="width: 180px;margin-right: 18px" auto-complete="false" v-model="user.code"
                                  placeholder="验证码"></el-input>
                        <el-button v-if="showButton" type="primary" @click="captcha">发送验证码</el-button>
                        <el-button v-else type="primary" :disabled="true">请稍等{{count}}秒</el-button>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" type="text" auto-complete="false" v-model="user.password"
                                  placeholder="请输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" type="text" auto-complete="false" v-model="user.repassword"
                                  placeholder="请再次输入密码"></el-input>
                    </el-form-item>
                    <el-button type="primary" class="am-cf" @click="changePassword">更换密码</el-button>

                </div>
            </div>
        </el-form>

    </div>

</template>

<script setup>
  import {forgetPwd, forgetPwdCode} from "@/assets/api/userApi";
  import {ElMessage} from "element-plus";
  import {useRouter} from "vue-router";
  import {ref} from "vue";

  const router = useRouter();
  const user = ref({
    email: '',
    password: '',
    repassword: '',
    code: ''
  });
  const showButton = ref(true);
  const count = ref(0);
  const timer = ref(null);
  const rules = ref({
    email: {required: true, message: '请输入邮箱', trigger: 'blur'},
    code: {required: true, message: '请输入验证码', trigger: 'blur'},
    password: {required: true, message: '请输入密码', trigger: 'blur'},
    repassword: {required: true, message: '请再次输入密码', trigger: 'blur'},
  });

  const captcha = () => {
    forgetPwdCode(user).then((res) => {
      let regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!regEmail.test(user.email.value)) {
        ElMessage.error("邮箱格式不正确！");
      } else if (res.code === 200) {
        countDown();
        ElMessage.success(res.message);
      } else {
        ElMessage.error(res.message);
      }
    });
  };
  const countDown = () => {
    const timeCount = 60;
    if (!timer.value) {
      showButton.value = false;
      count.value = timeCount;
      timer.value = setInterval(() => {
        if (count.value > 0 && count.value <= timeCount) {
          count.value--;
        } else {
          clearInterval(timer.value);
          showButton.value = true;
          timer.value = null
        }
      }, 1000);

    }
  };
  const changePassword = () => {
    if (user.repassword.value !== user.password.value) {
      ElMessage.error("两次输入密码不一致！");
    } else {
      forgetPwd(user).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.message);
          router.push('/login');
        } else {
          ElMessage.error(res.message);
        }
      }).catch(error => {
            ElMessage.error(error);
          }
      )
    }
  };
</script>

<style scoped>
    @import "../../assets/css/dlstyle.css";
    @import "../../assets/css/amazeui.css";
    @import "../../assets/css/bootstrap.css";
</style>
